<template>
	<view class="detail u-skeleton">
		<view class="scroll-Y">
			<view class="detail-swiper">
				<view class="u-skeleton-fillet">
<!--					<u-swiper :list="list" height="750" mode="none" @click="getImg" @change="swiperChange" border-radius="0"></u-swiper>-->
					<image :src="detailsImg" @click="getDetailsImg(detailsImg)" mode="widthFix" style="width: 100%;min-height: 100%;"></image>
				</view>
				<view class="swiper-preview u-skeleton-fillet">
					<image v-for="(item, index) in list"
							  :key="index" style="margin: 0 2rpx;width: 125rpx;height: 125rpx;"
							  :src="item"
							   @click="getImg(index)"
							  :class="detailsImg === item?'active':'active2'"></image>
				</view>
			</view>
			<view class="detail-head">
				<view class="head-base u-skeleton-fillet">
					<view class="base-info" @click="petClick(dataList.pid)">
						<image :src="dataList.petAvatar" style="width: 64rpx;height: 64rpx;border-radius: 50%;" mode="aspectFill"></image>
						<view class="info-nickname" style="margin-left: 20rpx;">{{dataList.petName}}</view>
					</view>
					<view class="base-operation" v-if="!followFlag" @click="setFollow">+ 吸宠</view>
					<view class="base-operation2" v-else @click="setFollow">已吸宠</view>
				</view>
				<view class="head-title u-skeleton-fillet">{{dataList.title}}</view>
				<view class="head-content u-skeleton-fillet">
					{{dataList.content}}
				</view>
				<view class="head-time u-skeleton-fillet">{{dataList.date}}发布</view>
			</view>
			<view class="detail-comment u-skeleton-fillet" v-if="remarkData.length > 0">
				<view class="comment-head">
					<view style="font-size: 28rpx;font-weight: 600;">共{{dataList.quantity}}条评论</view>
					<view class="head-operation">
						<view v-for="(item, index) in switchItem"
							  :key="index"
							  :class="{'switchActive': switchCurrentIndex === index}"
							  class="operation-item"
							  @click="switchItemClick(index)">{{item}}</view>
					</view>
				</view>
				<view class="comment-item">
					<view class="item" v-for="(item,index) in remarkData" :key="index">
						<view class="item-main" @longpress="logoTime(item.id,item.uid)">
							<image :src="item.userAvatar" style="width: 64rpx;height: 64rpx;border-radius: 50%;" mode="aspectFill" @click="userClick(item.uid)"></image>
							<view class="main-info" @click='reply(item.id,index)'>
								<view class="info-nickname">{{item.userName}}
								<span
								style='padding: 0 10rpx;margin-left: 20rpx;background: #FF9A00;border-radius: 6rpx;color: white;font-size: 22rpx;'
								v-if="item.author==1">作者</span></view>
								<view style="padding: 10rpx 0;color: #3F3F3F;font-size: 28rpx;font-weight: 400;">{{item.content}}</view>
								<view class="info-time">{{item.date}}<span style="margin-left: 20rpx;color: #666666;">回复</span></view>
							</view>
							<view class="main-operation" @click="giveClick(item.id)">
								<!-- <u-image style="margin-right: 10rpx;" width="32rpx" height="28rpx" :src="(item.likeFlag?shou12:shou11)"></u-image> -->
								<image src="../../../static/img/dianzhui.png" style="width: 36rpx;height: 38rpx;margin-right: 10rpx;" v-if="!item.likeFlag"></image>
								<image src="../../../static/img/dianzhuang.png" style="width: 36rpx;height: 38rpx;margin-right: 10rpx;" v-else></image>
								<view v-if="item.likes">{{item.likes}}</view>
							</view>
						</view>
						<view class="item-minor" v-for="(items,inde) in item.replies" :key="inde" v-if="items.replyId == 0" @longpress="logoTime(items.id,items.uid)">
							<image :src="items.userAvatar" style="width: 40rpx;height: 40rpx;border-radius: 50%;" mode="aspectFill"></image>
							<view class="minor-info" @click="replyTwo(items.commentId,index,items.id,items.userId)">
								<view class="info-nickname">{{items.userName}}
								<span
								style='padding: 0 10rpx;margin-left: 20rpx;background: #FF9A00;border-radius: 6rpx;color: white;font-size: 22rpx;'
								v-if="items.author==1">作者</span>
								</view>
								<view style="color: #3F3F3F;font-size: 28rpx;font-weight: 400;">{{items.content}}</view>
								<view class="info-time">{{items.date}}<span style="margin-left: 20rpx;color: #666666;">回复</span></view>
							</view>
							<view class="minor-operation" @click="giveClick(items.id)">
								<image src="../../../static/img/dianzhui.png" style="width: 36rpx;height: 38rpx;margin-right: 10rpx;" v-if="!items.likeFlag"></image>
								<image src="../../../static/img/dianzhuang.png" style="width: 36rpx;height: 38rpx;margin-right: 10rpx;" v-else></image>
								<view v-if="items.likes">{{items.likes}}</view>
							</view>
						</view>
						<view class="item-minor" v-for="(items,inde) in item.replies" :key="inde" v-if="items.replyId != 0" @longpress="logoTime(items.id,items.uid)">
							<image :src="items.userAvatar" style="width: 40rpx;height: 40rpx;border-radius: 50%;" mode="aspectFill"></image>
							<view class="minor-info" @click="replyTwo(items.commentId,index,items.id,items.userId)">
								<view class="info-nickname">
									<span>{{items.userName}}</span>
									<span style="margin: 0 20rpx;"><u-icon name="play-right-fill" color="#999999" size="22"></u-icon></span>
									<span>{{items.replyUserName}}</span>
								</view>
								<view style="color: #3F3F3F;font-size: 28rpx;font-weight: 400;">{{items.content}}</view>
								<view class="info-time">{{items.date}}<span style="margin-left: 20rpx;color: #666666;">回复</span></view>
							</view>
							<view class="minor-operation" @click="giveClick(items.id)">
								<image src="../../../static/img/dianzhui.png" style="width: 36rpx;height: 38rpx;margin-right: 10rpx;" v-if="!items.likeFlag"></image>
								<image src="../../../static/img/dianzhuang.png" style="width: 36rpx;height: 38rpx;margin-right: 10rpx;" v-else></image>
								<view v-if="items.likes">{{items.likes}}</view>
							</view>
						</view>
						<view class="item-more" v-if="item.repliesNumber > 1" @click="getReplies(item.id,item.diaryId,item.replies.length,index)">
							<view v-if="item.repliesNumber > 1">
								<view style="width: 100%;display: flex;align-items: center;flex-direction: row;" v-if="item.replies.length == item.repliesNumber" @click="packUp(index)">
									收起
									<u-image style="margin-left: 20rpx;margin-top: 25rpx;transform:rotate(180deg);" width="20rpx" height="20rpx" src="@/static/diary/more2.png"></u-image>
								</view>
								<view style="width: 100%;display: flex;align-items: center;flex-direction: row;" v-if="item.repliesNumber > 1 && item.replies.length < 6 && item.replies.length < 5 && item.replies.length < 4 && item.replies.length < 3 && item.replies.length < 2">
									展开{{item.repliesNumber - 1}}条评论
									<u-image style="margin-left: 20rpx;margin-top: -20rpx;" width="20rpx" height="20rpx" src="@/static/diary/more2.png"></u-image>
								</view>
								<view style="width: 100%;display: flex;align-items: center;flex-direction: row;" v-if="item.replies.length >= 6 && item.repliesNumber > 6 && item.replies.length != item.repliesNumber">
									展开更多评论
									<u-image style="margin-left: 20rpx;margin-top: -20rpx;" width="20rpx" height="20rpx" src="@/static/diary/more2.png"></u-image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="detail-end" v-if="remarkData.length == 0">-  THE END  -</view> -->
			<view class="detail-end" style="padding-bottom: 160rpx;" v-if="remarkShow">-  THE END  -</view>
		</view>
		<u-popup v-model="show" mode="center">
			<view class="popup">
				<view class="popup-view" @click="delDiscuss">
					删除评论
				</view>
			</view>
		</u-popup>
		<view class="detail-operation">
			<view style='width: 60%;display: flex;align-items: center;flex-direction: row;height: 70rpx;background: #F6F6F6;border-radius: 50rpx;'>
				<image src="../../../static/img/tjpl.png" style="width: 30rpx;height: 30rpx;margin: 0 15rpx;" mode=""></image>
				<input
				type="text"
				cursor-spacing="20"
				:focus='setFocus'
				v-model="remarkList.content"
				style="width: 100%;"
				placeholder="评论一下"
				confirm-type="search"
				@confirm="doSearch"/>
			</view>
			<view class="operation-text" @click="setLike">
				<image style="width: 36rpx;height: 36rpx;" src="@/static/diary/yun1.png" mode="widthFix" v-if="!likeFlags"></image>
				<image src="../../../static/img/yunxiYellow.png" v-else style="width: 36rpx;height: 36rpx;" mode=""></image>
				<view>云吸</view>
			</view>
			<view class="operation-text" @click="collect">
				<image style="width: 36rpx;height: 36rpx;" src="@/static/diary/shou1.png" mode="widthFix" v-if="!collectFlags"></image>
				<image src="../../../static/img/shoucYellow.png" style="width: 36rpx;height: 36rpx;" mode="" v-else></image>
				<view>收藏</view> 
			</view>
			<view class="operation-text">
				<image style="width: 36rpx;height: 36rpx;" src="@/static/diary/share.png" mode="widthFix"></image>
				<view>分享</view>
				<button type="primary" open-type="share" style="width: 50rpx;height: 70rpx;position: absolute;top: 0;left: 0;opacity: 0;"></button>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#fff"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				list: [
					'君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。'
				],
				currentIndex: 0,
				detailsImg: undefined,
				switchItem: ['热评', '最新'],
				switchCurrentIndex: 0,
				giveShow: true,
				options: {},
				dataList: {
					pid: '君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。',
					time: '君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。',
					title: '君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。',
					context: '君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。',
					pid: '君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。'
				},
				remarkList: {
					commentId: undefined,
					content: undefined,
					diaryId: undefined,
					replyId: undefined,
					replyUserId: undefined,
					type: 1,
					userId: undefined
				},
				remarkData: [
					'君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。'
				],     //日记评论数组
				setFocus: false,     //input激活光标
				onReply: false,
				page: 1,    //一级评论
				size: 5,
				total: 10,
				show: false,    //删除弹窗显示隐藏
				remarkShow: false,    //一级评论到底提示
				delId: 0,   //删除id
				dataIdsArray: []    ,//评论点赞数组
				likeFlags: false,   //日记点赞
				collectFlags: false   ,//日记收藏
				followFlag: false,    //吸宠
				followFlags: false,
				loading: true,
				detailsIndex: 0
			}
		},
		onShareAppMessage(res){
			return {
				title: this.dataList.title,
				path: '/pages/index/index'
			}
		},
		onUnload() {
			if(this.followFlag != this.followFlags){    //判断日记点赞修改值是否不等于接口返回数据，则执行
				this.setFollows()
			}
			if(this.dataIdsArray.length > 0){   //日记评论点赞数组
				this.like(2)  //日记评论点赞
			}
			if(this.dataList.likeFlag != this.likeFlags){    //判断日记点赞修改值是否不等于接口返回数据，则执行
				this.like(1)  //日记点赞
			}
			if(this.dataList.collectFlag != this.collectFlags){      //判断日记收藏修改值是否不等于接口返回数据，则执行
				let self = this
				self.$request(self.commonApi.opsCollect+self.dataList.id,'GET').then(res=>{    //日记收藏
					self.getData()
				})
			}
		},
		onPullDownRefresh() {
			this.remarkShow = false
			this.page = 1
			this.getData()
			this.getComments()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom: function() {
			let self = this
			if(self.remarkData.length < self.total){
				self.remarkShow = false
				self.page += 1
				let type = 1
				if(self.switchCurrentIndex == 0){
					type = 1
				}else{
					type = 2
				}
				let data = {
					diaryId: self.remarkList.diaryId,
					page: self.page,
					size: self.size,
					type: type
				}
				self.$request(self.commonApi.commentsList,'POST',data,'application/json').then(res=>{
					let data = res.data.data.result
					data.forEach(item=>{
						self.remarkData.push(item)
					})
				})
			}else{
				self.remarkShow = true
			}
		},
		methods: {
			getDetailsImg(){
				uni.previewImage({
					urls: this.list,
					current: this.detailsIndex
				});
			},
			getImg(e){
				this.detailsImg = this.list[e]
				this.detailsIndex = e
				// console.log([this.list[e]])
				
			},
			setFollows(){
				let self = this
				self.$request(self.commonApi.onFollow+self.dataList.pid,'GET').then(res=>{
					self.getData()
				})
			},
			collect(){
				this.collectFlags = !this.collectFlags
			},
			setLike(){
				this.likeFlags = !this.likeFlags
			},
			like(e){    //评论日记点赞
				let self = this
				let dataIds = []
				if(e == 1){
					dataIds = [self.dataList.id]
				}else{
					dataIds = self.dataIdsArray
				}

				let data = {
					dataIds: dataIds,
					type: e
				}
				self.page = 1
				self.$request(self.commonApi.opsLike,'POST',data,'application/json').then(res=>{
					self.dataIdsArray = []
					self.getComments()
					self.getData()
				})
			},
			delDiscuss(){  //删除自己评论
				let self = this
				self.$request(self.commonApi.diaryDeletes+self.delId,'POST',{}).then(res=>{
					self.page = 1
					self.getComments()
				})
			},
			logoTime(e,uid){    //判断是否是自己发送的评论
				if(uid == uni.getStorageSync('uid')){
					this.show = true
				}
				this.delId = e
			},
			packUp(i){      //收起评论
				this.page = 1
				// this.remarkData[i].replies = this.remarkData[i].replies[0]
				this.getComments()
			},
			setFollow(){     //关注宠物
				this.followFlag = !this.followFlag
			},
			swiperChange (index) {     //轮播图
			console.log(index)
				this.currentIndex = index
			},
			switchItemClick (index) {   //切换评论列表类型
				this.switchCurrentIndex = index
				if(this.dataIdsArray.length > 0){
					this.like(2)
				}else{
					this.getComments()
				}
			},
			setDataIdsArray(id){    //处理数组重复
				if(this.dataIdsArray.indexOf(id) == '-1'){
					this.dataIdsArray.push(id)
				}else{
					this.deletes(id)
				}
				return this.dataIdsArray
			},
			deletes(i){    //删除数组已存在的数据
			　　let index = this.dataIdsArray.indexOf(i);
				this.dataIdsArray.splice(index, 1)
			},
			giveClick (id) {
				this.remarkData.forEach((item,index)=>{
					if(item.id != id){
						if(item.replies?item.replies.length > 0:false){
							item.replies.forEach(dats=>{
								if(dats.id == id){
									dats.likeFlag = !dats.likeFlag
									this.setDataIdsArray(id)
									if(dats.likeFlag){
										dats.likes += 1
									}else{
										dats.likes -= 1
									}
								}
							})
						}
					}else{
						item.likeFlag = !item.likeFlag
						this.setDataIdsArray(id)
						if(item.likeFlag){
							item.likes += 1
						}else{
							item.likes -= 1
						}
					}
				})
			},
			getReplies(id,diaryId,leng,i){     //查看二级回复
				let self = this;
				let data = {
					commentId: id,
					diaryId: diaryId,
					size: leng,
				}
				self.$request(self.commonApi.commentsReply,'POST',data,'application/json').then(result=>{
					let data = result.data.data
					data.forEach(item=>{
						self.remarkData[i].replies.push(item)
					})

				})
			},
			getData(){   //通过id查询日记信息
				let self = this
				self.$request(self.commonApi.diaryId+self.remarkList.diaryId,'GET').then(res=>{
					this.loading = false
					let data = res.data.data
					self.dataList = data
					self.likeFlags = self.dataList.likeFlag
					self.collectFlags = self.dataList.collectFlag
					self.followFlag = self.dataList.followFlag
					self.followFlags = self.dataList.followFlag
					self.list = data.mediaUrl.split(',')
					self.detailsImg = self.list[0]
				})
			},
			getComments(){   //查看评论
				let self = this;
				let type = 1
				if(self.switchCurrentIndex == 0){
					type = 2
				}else{
					type = 1
				}
				let data = {
					diaryId: self.remarkList.diaryId,
					page: self.page,
					size: self.size,
					type: type
				}
				self.$request(self.commonApi.commentsList,'POST',data,'application/json').then(res=>{
					self.remarkData = res.data.data.result
					self.total = res.data.data.meta.total
					this.show = false
				})
			},
			reply(id,i){   //回复
				// this.page = 1
				this.setFocus = !this.setFocus
				this.onReply = true
				this.remarkList.type = 2    //1评论2回复
				this.remarkList.commentId = id
			},
			replyTwo(cid,i,rid,uid){
				this.setFocus = !this.setFocus
				this.onReply = true
				this.remarkList.type = 2
				this.remarkList.commentId = cid
				this.remarkList.replyId = rid
				this.remarkList.replyUserId = uid
			},
			doSearch(id){    //发表评论
				let self = this;
				if(!self.remarkList.content){
					uni.showToast({
						title: '请先填写内容',
						duration: 1500,
						icon: 'none'
					})
					return false
				}
				if(self.onReply){   //判断点击是回复还是直接评论触发input
					self.setReply()
				}else{
					self.remarkList.type = 1
					self.setReply()
				}
			},
			setReply(){    //添加评论
				let self = this;
				let data = {
					commentId: self.remarkList.commentId,
					content: self.remarkList.content,
					diaryId: self.remarkList.diaryId,
					replyId: self.remarkList.replyId,
					replyUserId: self.remarkList.replyUserId,
					type: self.remarkList.type,
					userId: self.remarkList.userId,
				}
				self.$request(self.commonApi.commentsAdd,'POST',data,'application/json').then(res=>{
					if(res.data.code == 200){
						self.remarkList.commentId = undefined,
						self.remarkList.content = undefined,
						self.remarkList.replyId = undefined,
						self.remarkList.replyUserId = undefined,
						self.remarkList.type = 1,
						// self.remarkList.userId = undefined,
						self.onReply = false
						self.setFocus = false
						self.page = 1
						self.getComments()
						self.getData()
					}
				})
			},
			// 宠物头像跳转主页
			petClick (pid) {
				uni.navigateTo({
					url: '../../../pages/pet/home/home?id=' + pid
				})
			},
			// 用户头像跳转主页
			userClick (uid) {
				uni.navigateTo({
					url: '../../user/components/profile?uid=' + uid
				})
			}
		},
		onLoad(option) {
			this.remarkList.diaryId = option.id
			this.getData()
			this.getComments()
		}
	}
</script>

<style lang="scss" scoped>
	.popup-view{
		font-size: 28rpx;
		color: #333333;
		padding: 30rpx 20rpx;
	}
	.popup{
		width: 500rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.detail {
		height: 100vh;
		position: relative;
		.scroll-Y {
			height: calc(100vh - 112rpx);
		}
		.detail-swiper {
			.swiper-preview {
				display: flex;
				flex-direction: row;
				margin-top: -5rpx;
				.active {
					border: 1px solid #FF9A00;
				}
				.active2{
					border: 1px solid white;
				}
			}
		}
		.info-nickname {
			// margin-left: 20rpx;
			font-size: 26rpx;
			font-weight: 700;
			color: #333333;
			line-height: 40rpx;
		}
		.detail-head {
			padding: 30rpx;
			border-bottom: 2rpx solid #f9f9f9;
			.head-base {
				display: flex;
				justify-content: space-between;
				margin: 10rpx 0 30rpx 0;
				.base-info {
					display: flex;
					align-items: center;
					
				}
				.base-operation {
					width: 160rpx;
					height: 60rpx;
					background: #FFF7EB;
					border-radius: 30rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FF9A00;
					line-height: 60rpx;
					text-align: center;
				}
				.base-operation2 {
					width: 160rpx;
					height: 60rpx;
					background: #f2f2f2;
					border-radius: 30rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					line-height: 60rpx;
					text-align: center;
				}
			}
			.head-title {
				font-size: 34rpx;
				font-weight: 700;
				color: #333333;
				line-height: 32rpx;
				margin-bottom: 20rpx;
			}
			.head-content {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
			}
			.head-time {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
				margin-top: 20rpx;
			}
		}
		.detail-comment {
			padding: 30rpx;
			// padding-bottom: 120rpx;
			border-bottom: 2rpx solid #f9f9f9;
			.comment-head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				.head-operation {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 208rpx;
					height: 60rpx;
					background: #F6F6F6;
					border-radius: 30rpx;
					font-size: 26rpx;
					font-weight: 600;
					color: #999999;
					line-height: 52rpx;
					text-align: center;
					padding: 4rpx;
					.operation-item {
						width: 104rpx;
						height: 52rpx;
						border-radius: 30rpx;
						transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
						transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05), -webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
						transition: transform cubic-bezier(0.3, 1.05, 0.4, 1.05);
						transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
					}
					.switchActive {
						background-color: #fff;
						color: #333333;
						transition: background-color 0.3s;
					}
				}
			}
			.comment-item {
				margin-top: 30rpx;
				.item {
					.item-main {
						display: flex;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						line-height: 44rpx;
						.main-info {
							margin: 0 20rpx;
							flex: 5;
							.info-time {
								color: #999999;
								font-size: 22rpx;
								padding-bottom: 15rpx;
							}
						}
						.main-operation {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							line-height: 40rpx;
							color: #999999;
							height: 28rpx;
						}
					}
					.item-minor {
						display: flex;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						line-height: 44rpx;
						margin-left: 70rpx;
						margin-top: 20rpx;
						.minor-info {
							margin: 0 20rpx;
							flex: 6;
							.info-time {
								color: #999999;
								font-size: 22rpx;
								padding-bottom: 15rpx;
							}
							.info-content {
								span {
									margin: 0 20rpx;
									color: #999999;
								}
								.content-repaer {
									display: inline-block;
								}
							}
						}
						.minor-operation {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							line-height: 40rpx;
							color: #999999;
							height: 28rpx;
						}
					}
					.item-more {
						display: flex;
						font-size: 28rpx;
						font-weight: 400;
						color: #FF9A00;
						line-height: 44rpx;
						margin-left: 132rpx;
						margin-top: 9rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}
		.detail-end {
			padding: 40rpx 0;
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
		}
		.detail-operation {
			width: 750rpx;
			height: 112rpx;
			background: #FFFFFF;
			box-shadow: 0px -1px 1px 0px #EEEEEE;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			line-height: 34rpx;
			.operation-text {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;
			}
		}
	}
</style>
